import React, { useEffect, } from "react";
import * as echarts from "echarts";
export default function Detections() {

    let dataMax = 60;
    const source = {
        data: [53, 38, 45, 20, 35, 49, 40, 30, 35, 40],
        indicator: [
            { name: '河北', max: dataMax },
            { name: '四川', max: dataMax },
            { name: '广西', max: dataMax },
            { name: '吉林', max: dataMax },
            { name: '辽宁', max: dataMax },
            { name: '江西', max: dataMax },
            { name: '江苏', max: dataMax },
            { name: '河南', max: dataMax },
            { name: '陕西', max: dataMax },
            { name: "山西", max: dataMax }
        ]
    }
    const source1 = {
        data: [20, 50, 30, 30, 30, 35, 50, 40, 50, 55],
        indicator: [
            { name: '河北', max: dataMax },
            { name: '四川', max: dataMax },
            { name: '广西', max: dataMax },
            { name: '吉林', max: dataMax },
            { name: '辽宁', max: dataMax },
            { name: '江西', max: dataMax },
            { name: '江苏', max: dataMax },
            { name: '河南', max: dataMax },
            { name: '陕西', max: dataMax },
            { name: "山西", max: dataMax }
        ]
    }
    const buildSeries = function (data: any) {
        const helper = data.map((item: any, index: any) => {
            const arr = new Array(data.length);
            arr.splice(index, 1, item);
            return arr;
        })

        return [data, ...helper].map((item, index) => {
            return {
                type: 'radar',
                itemStyle: {
                    color: '#31e586'
                },
                lineStyle: {
                    color: index === 0 ? '#31e586' : 'transparent'
                },
                areaStyle: {
                    color: index === 0 ? '#31e586' : 'transparent',
                    opacity: 0.3
                },
                tooltip: {
                    show: index === 0 ? false : true,
                    formatter: function () {
                        // 
                    }
                },
                z: index === 0 ? 1 : 2,
                data: [item]
            }
        })
    }

    const buildSeries1 = function (data: any) {
        const helper = data.map((item: any, index: any) => {
            const arr = new Array(data.length);
            arr.splice(index, 1, item);
            return arr;
        })

        return [data, ...helper].map((item, index) => {
            return {
                type: 'radar',
                itemStyle: {
                    color: '#31e586'
                },
                lineStyle: {
                    color: index === 0 ? '#31e586' : 'transparent'
                },
                areaStyle: {
                    color: index === 0 ? '#31e586' : 'transparent',
                    opacity: 0.3
                },
                tooltip: {
                    show: index === 0 ? false : true,
                    formatter: function () {

                    }
                },
                z: index === 0 ? 1 : 2,
                data: [item]
            }
        })
    }


    useEffect(() => {
        //请求数据  把数据放入 图表中
        var myChart = echarts.init(document.getElementById("quality") as HTMLDivElement);
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                showContent: true
            },
            legend: {
                show: true,
                textStyle: {
                    fontSize: 14,
                    color: '#fff'
                }
            },
            radar: {
                // shape: 'circle',
                name: {
                    show: true,
                    color: '#fff',
                    fontSize: '14px',
                },
                splitNumber: 4,
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(12,62,129,0)', 'rgba(12,62,129,0.3)', 'rgba(12,62,129,0)', 'rgba(12,62,129,0)']
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#0c3e81'
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#0c3e81'
                    }
                },
                indicator: source.indicator
            },
            series: [...buildSeries(source.data), ...buildSeries1(source1.data)]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }, []);

    return <div><div id="quality" style={{ height: "300px", width: "300px" }}></div></div>
}
